<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<!--关键词和描述-->
	<title>未分类项</title>
	<!--下面是 公共的css-->
	<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="__ROOT__/static/note/index/css/common.css" rel="stylesheet" />

	<!--下面 每个页面的特色css-->




</head>

<body>

	<p>五种宽度类型</p>
	<div class="container">
		<h1>我的第一个 Bootstrap 页面</h1>
		<p>这是一些文本。</p> 

		<div class="row a">
			<div class="col ">.col</div>
			<div class="col">.col</div>
			<div class="col">.col</div>
		  </div>
		  <div class="row a">
			<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
			  <p>RUNOOB</p>
			</div>
			<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
			  <p>菜鸟教程</p>
			</div>
		  </div>



	  </div>
	  <hr/>
	  <pre>
		&lt;div class="container-fluid"&gt;
	
        &lt;p&gt;sm 平板 md 桌面 lg 大桌面 xl 超大桌面&lt;/p&gt; 
		  &lt;div class="row a"&gt;
			&lt;div class="col-sm-3 col-md-6 col-lg-4 col-xl-2"&gt;
			  &lt;p&gt;RUNOOB&lt;/p&gt;
			&lt;/div&gt;
			&lt;div class="col-sm-9 col-md-6 col-lg-8 col-xl-10"&gt;
			  &lt;p&gt;菜鸟教程&lt;/p&gt;
			&lt;/div&gt;
		  &lt;/div&gt;
	  &lt;/div&gt;

	  </pre>
<hr/>
	  <div class="container-fluid">
		<h1>我的第一个 Bootstrap 页面</h1>
		<p>使用了 .container-fluid，100% 宽度，占据全部视口（viewport）的容器。</p> 
		<div class="row a">
			<div class="col">.col</div>
			<div class="col">.col</div>
			<div class="col">.col</div>
		  </div>
        <p>sm 平板 md 桌面 lg 大桌面 xl 超大桌面</p> 
		  <div class="row a">
			<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
			  <p>RUNOOB</p>
			</div>
			<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 b">
			  <p>菜鸟教程</p>
			</div>
		  </div>
	  </div>







	<!--下面是 公共的js-->
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
 
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</body>

</html>